  <template>
    <div class="container">
        <div class="top">
            <div class="header">
              <img alt="logo" class="logo" src="@/assets/img/logo-view.png" />
            </div>
            <div class="desc">峰云慧远程监控与智能运维平台</div>
        </div>
        <div class="loginBox" >
            <div class="left">
              <div class="tit">用户登录</div>
              <a-form :model="formData" ref="formRef">
                <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;background-color: firebrick;border: 0" />
                <div style="color: blue;margin-bottom: 5px">手机号</div>
                <a-form-item>
                  <a-input
                    autocomplete="autocomplete"
                    size="large"
                    class="inputs"
                    v-model:value="formData.telephone"
                    placeholder="请输入手机号"
                    v-decorator="['telephone', {rules: [{ required: true, message: '请输入手机号', whitespace: true}]}]"
                  >
                  </a-input>
                </a-form-item>
                <div style="color: blue;margin-bottom: 5px">密码</div>
                <a-form-item>
                  <a-input
                    size="large"
                    placeholder="请输入密码"
                    autocomplete="autocomplete"
                    type="password"
                    class="inputs"
                    v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
                  >
                  </a-input>
                </a-form-item>
      
                <div style="color: #D01124;float: right;cursor: pointer;display: flex;margin-top:10px">忘记密码</div>
                <a-button  style="width: 100%;margin-top: 20px;height: 50px;background-color: #2F6FC1;border: 0;font-size:18px;color:white" 
                            size="large" htmlType="submit" type="primary" @click="login" >登录</a-button>
                <div style="cursor:pointer;text-align: center;margin-top: 15px;color: #D01124" @click="type=2">
                  前往注册>
                </div>
              </a-form>
            </div>
            <div class="right">
              <img src="@/assets/img/loginRight.png">
            </div>
        </div>
        <div class="footer">
            <div class="links">
              © 2025 
              <a href="http://www.hangf.com" style="color:#A7B2B8 ;">hangf.com</a>
            </div>
            <div class="copyright">
        
              北京航峰科伟装备技术股份有限公司
            </div>
        </div>

    </div>
  </template>
  
  <script lang="js" setup>
  //导入Api
  import { ref, onMounted } from 'vue';
  import { Form } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  const router=useRouter()
  //响应式数据
  const users = ref([]);
  const formRef = ref(null)
  const formData = ref({
    telephone:'',
    password:''
  })

  //方法
  const submit=async()=>{
    try {
      await formRef.value.validateFields();
      console.log(formData.value.telephone)
    } catch (error) {
      console.log(error);
    }
  }

  const login = async () => {
      router.push('/')
  }

  //生命周期钩子
  onMounted(async () => {
    try {
      // 1. 操作 DOM
      console.log('DOM 已挂载:'); 
       // 调用 Mock 接口
      const response = await fetch('/api/users');   
      users.value = await response.json();
      console.log(users.value.data[0].name)
    } catch (error) {
      console.log(error);      
    }
   
    
  });

  //监听器
  watch: {
    
  }
 
  </script>
  
  <style scoped lang="less">
  .container {
    width: 100%; /* 确保容器宽度占满父元素 */
    height: 100vh; /* 高度设置为视口高度 */
    background-image: url('@/assets/img/loginBg.png');
    background-repeat: no-repeat;
    background-size: 1920px 780px;
    margin-top: 0px;
    padding-top: 40px;
    .top {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        .header {            
          a {
            text-decoration: none;
          }
          .logo {
            width: 170px;
            height: 120px;
            margin-right: 16px;
          }
          .title {
            font-size: 33px;
           
            font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
            font-weight: 600;
            position: relative;
          }
        }
        .desc {
          font-size: 14px;
          color: #fff;
          font-size: 46px;
          font-weight: bold;
        }
      }
      .loginBox{
        width: 80%;
        margin: 0 auto;
        border-radius: 24px;
        height: 60%;
        margin-top: 60px;
        overflow: hidden;
        .left{
          width: 50%;
          background: #fff;
          height: 100%;
          padding: 30px 80px;
          box-sizing: border-box;
          float: left;
          .tit{
            font-size: 28px;
            font-weight: bold;
            color: #000;
            text-align: center;
            margin-bottom: 20px;
          }
        }
        .right{
          width: 50%;
          background: #EDF0F5;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          float: left;
          img{
            width: 90%;
          }
        }
      }
  }
  .inputs{
    background-color: #F0F3F6;
    height: 45px;
    border: 1px solid #F0F3F6;
    width: 100%;
    color: #000;
    margin: 10px 0px;
  }
  .btns{
    width: 100px;
    height: 30px;
    background: #AC2222;
    border-radius: 6px;
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    color: #fff;
    position: absolute;
    right: 10px;
    top: -7px;
  }
  .footer{
    padding: 48px 16px 24px;
    /*margin: 48px 0 24px;*/
    text-align: center;
    .copyright{    
      font-size: 14px;
      color: #A7B2B8;
      i {
          margin: 0 4px;
      }
    }
    .links{
      margin-bottom: 8px;
      color: #A7B2B8;
      a:not(:last-child) {        
        margin-right: 40px;
      }
      a{
        -webkit-transition: all .3s;
        transition: all .3s;
      }
    }
  }
  </style>